<link rel="import" href="../html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<!-- Common css variables for Material Design WebUI. -->
<custom-style>
<style is="custom-style">
  html {
    --google-blue-50-rgb: 232, 240, 254;  /* #e8f0fe */
    --google-blue-50: rgb(var(--google-blue-50-rgb));
    --google-blue-100-rgb: 210, 227, 252;  /* #d2e3fc */
    --google-blue-100: rgb(var(--google-blue-100-rgb));
    --google-blue-200-rgb: 174, 203, 250;  /* #aecbfa */
    --google-blue-200: rgb(var(--google-blue-200-rgb));
    --google-blue-300-rgb: 138, 180, 248;  /* #8ab4f8 */
    --google-blue-300: rgb(var(--google-blue-300-rgb));
    --google-blue-400-rgb: 102, 157, 246;  /* #669df6 */
    --google-blue-400: rgb(var(--google-blue-400-rgb));
    --google-blue-500-rgb: 66, 133, 244;  /* #4285f4 */
    --google-blue-500: rgb(var(--google-blue-500-rgb));
    --google-blue-600-rgb: 26, 115, 232;  /* #1a73e8 */
    --google-blue-600: rgb(var(--google-blue-600-rgb));
    --google-blue-700-rgb: 25, 103, 210;  /* #1966d2 */
    --google-blue-700: rgb(var(--google-blue-700-rgb));

    --google-green-50-rgb: 230, 244, 234;  /* #e6f4ea */
    --google-green-50: rgb(var(--google-green-50-rgb));
    --google-green-300-rgb: 129, 201, 149;  /* #81c995 */
    --google-green-300: rgb(var(--google-green-300-rgb));
    --google-green-400-rgb: 91, 185, 116;  /* #5bb974 */
    --google-green-400: rgb(var(--google-green-400-rgb));
    --google-green-500-rgb: 52, 168, 83;  /* #34a853 */
    --google-green-500: rgb(var(--google-green-500-rgb));
    --google-green-600-rgb: 30, 142, 62;  /* #1e8e3e */
    --google-green-600: rgb(var(--google-green-600-rgb));
    --google-green-700-rgb: 24, 128, 56;  /* #188038 */
    --google-green-700: rgb(var(--google-green-700-rgb));

    --google-grey-50-rgb: 248, 249, 250;  /* #f8f9fa */
    --google-grey-50: rgb(var(--google-grey-50-rgb));
    --google-grey-100-rgb: 241, 243, 244;  /* #f1f3f4 */
    --google-grey-100: rgb(var(--google-grey-100-rgb));
    --google-grey-200-rgb: 232, 234, 237;  /* #e8eaed */
    --google-grey-200: rgb(var(--google-grey-200-rgb));
    --google-grey-300-rgb: 218, 220, 224;  /* #dadce0 */
    --google-grey-300: rgb(var(--google-grey-300-rgb));
    --google-grey-400-rgb: 189, 193, 198;  /* #bdc1c6 */
    --google-grey-400: rgb(var(--google-grey-400-rgb));
    --google-grey-500-rgb: 154, 160, 166;  /* #9aa0a6 */
    --google-grey-500: rgb(var(--google-grey-500-rgb));
    --google-grey-600-rgb: 128, 134, 139;  /* #80868b */
    --google-grey-600: rgb(var(--google-grey-600-rgb));
    --google-grey-700-rgb: 95, 99, 104;  /* #5f6368 */
    --google-grey-700: rgb(var(--google-grey-700-rgb));
    --google-grey-800-rgb: 60, 64, 67;  /* #3c4043 */
    --google-grey-800: rgb(var(--google-grey-800-rgb));
    --google-grey-900-rgb: 32, 33, 36;  /* #202124 */
    --google-grey-900: rgb(var(--google-grey-900-rgb));
    /* --google-grey-900 + 4% white blended together. */
    --google-grey-900-white-4-percent: #292a2d;

    --google-red-300-rgb: 242, 139, 130;  /* #f28b82 */
    --google-red-300: rgb(var(--google-red-300-rgb));
    --google-red-500-rgb: 234, 67, 53;  /* #ea4335 */
    --google-red-500: rgb(var(--google-red-500-rgb));
    --google-red-600-rgb: 217, 48, 37;  /* #d93025 */
    --google-red-600: rgb(var(--google-red-600-rgb));

    --google-yellow-50-rgb: 254, 247, 224;  /* #fef7e0 */
    --google-yellow-50: rgb(var(--google-yellow-50-rgb));
    --google-yellow-300-rgb: 253, 214, 51;  /* #fdd633 */
    --google-yellow-300: rgb(var(--google-yellow-300-rgb));
    --google-yellow-400-rgb: 252, 201, 52;  /* #fcc934 */
    --google-yellow-400: rgb(var(--google-yellow-400-rgb));
    --google-yellow-500-rgb: 251, 188, 4;  /* #fbbc04 */
    --google-yellow-500: rgb(var(--google-yellow-500-rgb));

    --cr-primary-text-color: var(--google-grey-900);
    --cr-secondary-text-color: var(--google-grey-700);

    --cr-card-background-color: white;
    --cr-card-shadow-color-rgb: var(--google-grey-800-rgb);

    --cr-elevation-1: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0,
                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 1px 3px 1px;
    --cr-elevation-2: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0,
                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 2px 6px 2px;
    --cr-elevation-3: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 3px 0,
                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 4px 8px 3px;
    --cr-elevation-4: rgba(var(--cr-card-shadow-color-rgb), .3) 0 2px 3px 0,
                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 6px 10px 4px;
    --cr-elevation-5: rgba(var(--cr-card-shadow-color-rgb), .3) 0 4px 4px 0,
                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 8px 12px 6px;

    --cr-card-shadow: var(--cr-elevation-2);

    --cr-checked-color: var(--google-blue-600);
    --cr-focused-item-color: var(--google-grey-300);
    --cr-form-field-label-color: var(--google-grey-700);
    --cr-hairline-rgb: 0, 0, 0;
    --cr-iph-anchor-highlight-color: rgba(var(--google-blue-600-rgb), 0.1);
    --cr-link-color: var(--google-blue-700);
    --cr-menu-background-color: white;
    --cr-menu-background-focus-color: var(--google-grey-400);
    --cr-menu-shadow: 0 2px 6px var(--paper-grey-500);
    --cr-separator-color: rgba(0, 0, 0, .06);
    --cr-title-text-color: rgb(90, 90, 90);
    --cr-toolbar-background-color: white;

    --cr-hover-background-color: rgba(var(--google-grey-900-rgb), .1);
    --cr-active-background-color: rgba(var(--google-grey-900-rgb), .16);
    --cr-focus-outline-color: rgba(var(--google-blue-600-rgb), .4);
  }

  @media (prefers-color-scheme: dark) {
    html {
      --cr-primary-text-color: var(--google-grey-200);
      --cr-secondary-text-color: var(--google-grey-500);

      --cr-card-background-color: var(--google-grey-900-white-4-percent);
      --cr-card-shadow-color-rgb: 0, 0, 0;

      --cr-checked-color: var(--google-blue-300);
      --cr-focused-item-color: var(--google-grey-800);
      --cr-form-field-label-color: var(--dark-secondary-color);
      --cr-hairline-rgb: 255, 255, 255;
      --cr-iph-anchor-highlight-color: rgba(var(--google-grey-100-rgb), 0.1);
      --cr-link-color: var(--google-blue-300);
      --cr-menu-background-color: var(--google-grey-900);
      --cr-menu-background-focus-color: var(--google-grey-700);
      --cr-menu-background-sheen: rgba(255, 255, 255, .06);  /* Only dark mode. */
      --cr-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
                        rgba(0, 0, 0, .15) 0 3px 6px 2px;
      --cr-separator-color: rgba(255, 255, 255, .1);
      --cr-title-text-color: var(--cr-primary-text-color);
      --cr-toolbar-background-color: var(--google-grey-900-white-4-percent);

      --cr-hover-background-color: rgba(255, 255, 255, .1);
      --cr-active-background-color: rgba(var(--google-grey-200-rgb), .16);
      --cr-focus-outline-color: rgba(var(--google-blue-300-rgb), .4);
    }
  }

  @media (forced-colors: active) {
    html {
      /* In Windows HCM, |box-shadow| is not showing. The suggested workaround
         is to use |outline| or |border| instead. The color does not matter,
         since it is forced by the OS so using 'transparent'. */
      --cr-focus-outline-hcm: 2px solid transparent;
      --cr-border-hcm: 2px solid transparent;
    }
  }

  /* Don't use color values past this point. Instead, create a variable that's
   * set for both light and dark modes and use a single variable below. */

  html {
    --cr-button-edge-spacing: 12px;
    --cr-button-height: 32px;

    /* Spacing between policy (controlledBy) indicator and control. */
    --cr-controlled-by-spacing: 24px;

    /* Default max-width for input fields */
    --cr-default-input-max-width: 264px;

    /* The inner icon is 20px in size. The button has 8px * 2 padding. */
    --cr-icon-ripple-size: 36px;
    --cr-icon-ripple-padding: 8px;

    --cr-icon-size: 20px;

    --cr-icon-button-margin-start: 16px;

    /* Shift button so ripple overlaps the end of the row. */
    --cr-icon-ripple-margin: calc(var(--cr-icon-ripple-padding) * -1);

    /* TODO (johntlee): re-implement with paddings instead; */
    /* These are used for row items such as radio buttons, check boxes, list
     * items etc. */
    --cr-section-min-height: 48px;
    --cr-section-two-line-min-height: 64px;

    --cr-section-padding: 20px;
    --cr-section-vertical-padding: 12px;
    --cr-section-indent-width: 40px;
    --cr-section-indent-padding: calc(
        var(--cr-section-padding) + var(--cr-section-indent-width));

    --cr-section-vertical-margin: 21px;

    --cr-centered-card-max-width: 680px;
    --cr-centered-card-width-percentage: 0.96;

    --cr-hairline: 1px solid rgba(var(--cr-hairline-rgb), .14);

    --cr-separator-height: 1px;
    --cr-separator-line: var(--cr-separator-height) solid
        var(--cr-separator-color);

    --cr-toolbar-overlay-animation-duration: 150ms;
    --cr-toolbar-height: 56px;

    --cr-container-shadow-height: 6px;
    --cr-container-shadow-margin: calc(-1 * var(--cr-container-shadow-height));

    --cr-container-shadow-max-opacity: 1;

    /** MD Refresh Styles */
    --cr-card-border-radius: 8px;
    --cr-disabled-opacity: .38;
    --cr-form-field-bottom-spacing: 16px;
    --cr-form-field-label-font-size: .625rem;
    --cr-form-field-label-height: 1em;
    --cr-form-field-label-line-height: 1;
  }
</style>
</custom-style>
